<template ref="import">
  <el-dialog class="app-container" :title="title" width="950px" :visible.sync="dialShow" top="5vh" append-to-body>
    <el-table v-loading="loading" :data="AssetDetailsList" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <!--      <el-table-column label="自增id" align="center" prop="id" />-->
      <el-table-column label="资产名称" align="center" prop="assetName" />
      <!--      <el-table-column label="资产编码" align="center" prop="assetNo" />-->
      <!--      <el-table-column label="资产类别id" align="center" prop="classId" />-->
      <el-table-column label="资产类别名称" align="center" prop="className" />
      <!--      <el-table-column label="资产类别编码" align="center" prop="classNo" />-->
      <el-table-column label="品牌名" align="center" prop="assetBrand" />
      <el-table-column label="规格型号" align="center" prop="assetModel" />
      <el-table-column label="计量单位" align="center" prop="assetUnit" />
  <!--    <el-table-column label="存放地点" align="center" prop="assetLocation" />-->
  <!--    <el-table-column label="资产单价" align="center" prop="assetPrice" />-->
  <!--    <el-table-column label="资产数量" align="center" prop="assetQuantity" />-->
      <el-table-column label="可用数量" align="center" prop="assetAvailQuantity" />
      <!--      <el-table-column label="当前状态" align="center" prop="assetStatus" />-->
      <el-table-column label="备注" align="center" prop="remark" />
    </el-table>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleDetails">确 定</el-button>
      <el-button @click="dialShow = false">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import { listAssetDetails, getAssetDetails, delAssetDetails, addAssetDetails, updateAssetDetails } from "@/api/module/AssetDetails";
  import { getDicts } from '@/api/system/dict/data';

  export default {
    name:"details",
    data(){
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 资产明细表格数据
        AssetDetailsList: [],
        // 弹出层标题
        title: "选择领用物品",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          assetName: null,
          assetNo: null,
          classId: null,
          className: null,
          classNo: null,
          assetBrand: null,
          assetModel: null,
          assetUnit: null,
          assetPrice: null,
          assetLocation: null,
          assetQuantity: null,
          assetAvailQuantity: null,
          assetStatus: null,
        },
        classNameOptions:[],
        dialShow:false,
        isMultiple: 0,
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
      };
    },
    created() {
      this.getList();
      this.getAsssetClass();
    },
    methods: {
      show(isMultiple){
        // isMultiple =1 则表示多选
        if (isMultiple) {
          this.isMultiple = isMultiple;
        }
        this.dialShow=true
      },
      /** 查询资产明细列表 */
      getList() {
        this.loading = true;
        listAssetDetails(this.queryParams).then(response => {
          this.AssetDetailsList = response.rows;
          // 资产类型判断
          let arr = this.AssetDetailsList;
          arr.forEach(item => {
            item.className = this.getValue(this.classNameOptions, item.className)
          });
          this.AssetDetailsList = arr;
          this.total = response.total;
          this.loading = false;
        });
      },
      getValue(arr, item) {
        for (let i = 0; i < arr.length; i++) {
          if (item === arr[i].dictValue) {
            return arr[i].dictLabel
          }
        }
      },
      // 获取资产类别
      getAsssetClass() {
        getDicts('asset_class').then(response => {
          this.classNameOptions = response.data
        })
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          assetName: null,
          assetNo: null,
          classId: null,
          className: null,
          classNo: null,
          assetBrand: null,
          assetModel: null,
          assetUnit: null,
          assetPrice: null,
          assetLocation: null,
          assetQuantity: null,
          assetAvailQuantity: null,
          assetStatus: "0",
          createTime: null,
          createBy: null,
          updateTime: null,
          updateBy: null,
          delFlag: null,
          remark: null
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        // this.ids = selection.map(item => item.id)
        // this.single = selection.length!==1
        // this.multiple = !selection.length
        if (selection.length > 0) {
          this.id = "";
          this.assetName = "";
          this.className="";
          this.assetBrand="";
          this.assetModel="";

          selection.forEach(v => {
            console.log(v)
            this.id += v.id + ",";
            this.assetName += v.assetName + ",";
            this.className += v.className + ",";
            this.assetBrand += v.assetBrand + ",";
            this.assetModel += v.assetModel + ",";
          })
          this.id = this.id.substring(0, this.id.length - 1);
          this.assetName = this.assetName.substring(0, this.assetName.length - 1);
          this.className = this.className.substring(0, this.className.length - 1);
          this.assetBrand = this.assetBrand.substring(0, this.assetBrand.length - 1);
          this.assetModel = this.assetModel.substring(0, this.assetModel.length - 1);
          if (!this.isMultiple || this.isMultiple != 1) {
            //单选
            this.id = selection[0].id;
            this.assetName = selection[0].assetName;
            this.className = selection[0].className;
            this.assetBrand = selection[0].assetBrand;
            this.assetModel = selection[0].assetModel;
            if (selection.length > 1) {
              this.$refs.tb.clearSelection();
              this.$refs.tb.toggleRowSelection(selection.pop());
            }
          }
        }
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加资产明细";
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const id = row.id || this.ids
        getAssetDetails(id).then(response => {
          this.form = response.data;
          this.open = true;
          this.title = "修改资产明细";
        });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateAssetDetails(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addAssetDetails(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除资产明细编号为"' + ids + '"的数据项？').then(function() {
          return delAssetDetails(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('module/AssetDetails/export', {
          ...this.queryParams
        }, `AssetDetails_${new Date().getTime()}.xlsx`)
      },

      //选中用户
      handleDetails() {
        const id = this.id;
        const assetName=this.assetName;
        const className=this.className;
        const assetBrand=this.assetBrand;
        const assetModel=this.assetModel;
        if (id == "") {
          this.$modal.msgError("请选择物品");
          return;
        }
        this.dialShow = false;
        const data = {
          id: this.id,
          assetName: this.assetName,
          className: this.className,
          assetBrand: this.assetBrand,
          assetModel: this.assetModel,
          // type: this.type
        }
        this.$emit("showDetails", data);
      }
    }
  };

</script>
